<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-11-09 10:21:36
 * @LastEditors: htang
 * @LastEditTime: 2024-03-08 11:01:08
-->
<template>
  <div class="right-echarts-node">
    <div class="tip">
      <span>报警类型占比</span>
      <dv-decoration2 :dur="2" />
    </div>
    <div ref="eventEcharts" id="right-event-echarts"></div>
  </div>
</template>

<script>
import { ref, watch, getCurrentInstance, onMounted, defineComponent, onUnmounted, nextTick, onBeforeUnmount } from 'vue';
import { summaryTypeApi } from '/@/api/data-statistics/index.ts';
import { Progress } from 'ant-design-vue';
import { useUserStore } from '/@/store/modules/user';
import '@/assets/js/highcharts/highcharts.js';
import '@/assets/js/highcharts/highcharts-3d.js';
import '@/assets/js/highcharts/modules/exporting.js';
import * as echarts from 'echarts';
export default defineComponent({
  components: { Progress },
  setup() {
    const userStore = useUserStore();

    let { proxy } = getCurrentInstance();

    let option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        type: 'scroll', // 启用滚动翻页的图例
        orient: 'vertical', // 垂直方向
        right: 10, // 图例组件离容器右侧的距离
        top: 20, // 图例组件离容器上侧的距离
        bottom: 5, // 图例组件离容器下侧的距离
        pageButtonItemGap: 10, // 翻页按钮之间的间隔
        pageButtonGap: 20, // 翻页按钮与图例项之间的间隔
        pageButtonPosition: 'end', // 翻页按钮的位置
        pageFormatter: '{current}/{total}', // 翻页控制器的显示格式
        pageIcons: {
          // 翻页按钮的图标
          horizontal: ['M0,0L12,-12L24,0L12,12Z', 'M24,0L12,-12L0,0L12,12Z'],
          vertical: ['M0,0L12,-12L24,0L12,12Z', 'M24,0L12,-12L0,0L12,12Z'],
        },
        textStyle: {
          color: '#fff', // 图例文字颜色
        },
        pageIconColor: '#2f4554', // 翻页按钮的颜色
        pageIconInactiveColor: '#aaa', // 翻页按钮不激活时（即不可点击时）的颜色
        pageIconSize: 15, // 翻页按钮的大小
        pageTextStyle: {
          // 翻页信息的文字样式
          color: '#fff',
        },
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['45%', '90%'],
          center: ['35%', '55%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
            normal: {
              show: false,
              position: 'center',
              formatter(params) {
                // 如果是悬停在扇区上，显示该扇区的百分比
                if (params.name) {
                  return params.name + '：' + params.percent.toFixed(2) + '%';
                }
                // 否则显示总体百分比
                return ((params.value / total) * 100).toFixed(2) + '%';
              },
              color: '#fff',
              fontSize: 12,
              rich: {
                total: {
                  fontSize: 14,
                  fontFamily: '微软雅黑',
                  color: '#fff',
                },
                active: {
                  fontSize: 15,
                  fontFamily: '微软雅黑',
                  color: '#fff',
                },
              },
            },
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 18,
              fontWeight: 'bold',
              color: '#fff',
              normal: {
                formatter(params) {
                  return params.name + ': ' + params.value + ' (' + params.percent + '%)';
                },
              },
            },
          },
          labelLine: {
            show: false,
          },
          data: [],
        },
      ],
    };

    let chart;

    /**
     * 初始化图表
     */
    function initEcharts() {
      var chartDom = document.getElementById('right-event-echarts');
      var myChart = echarts.init(chartDom);

      option.series[0].data = [];

      summaryTypeApi().then((res) => {
        let eventNeedAlarm = userStore?.dictItems?.event_need_alarm;
        let seriesData = [];
        res.map((k) => {
          let name = eventNeedAlarm.find((_) => _['value'] == k['subAlarmType'])?.label;

          seriesData.push({
            value: k['count'],
            name: name ? name : k['subAlarmType'],
          });
        });
        if (myChart) {
          // myChart.resize();
        }
        // if (isFullScreen()) {
        //   option.series[0].radius = ['10%', '20%'];
        //   option.series[0].center = ['45%', '40%'];
        // } else {
        //   option.series[0].radius = ['45%', '90%'];
        // }
        option.series[0].data = seriesData;
        option && myChart.setOption(option);
      });
    }

    // 检测 F11 键并阻止默认全屏行为的处理函数
    const handleF11KeyPress = (event) => {
      // if (event.key === 'F11') {
      //   option.series[0].radius = ['35%', '20%'];
      //   option.series[0].center = ['45%', '40%'];
      //   option && myChart.setOption(option);
      // } else {
      //   option.series[0].radius = ['45%', '90%'];
      //   option.series[0].center = ['35%', '55%'];
      //   option && myChart.setOption(option);
      // }
    };

    onMounted(() => {
      initEcharts();
      window.addEventListener('resize', initEcharts);

      document.addEventListener('keydown', handleF11KeyPress);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', initEcharts);

      document.removeEventListener('keydown', handleF11KeyPress);
    });

    return {};
  },
});
</script>

<style lang="less" scoped>
.right-echarts-node {
  width: 100%;
  height: 250px;
  // height: calc(100% - 580px);
  padding: 0 0 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.01) 100%);
  backdrop-filter: blur(100px);
  .tip {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 0 0 43.3px;
    background: url('@/assets/images/img-39.png') no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    font-size: 16px;
    color: #fff;
    span {
      position: relative;
    }
    .dv-decoration-2 {
      position: absolute;
      bottom: 0;
      left: 11px;
      width: 95%;
      height: 5px;
    }
  }
  #right-event-echarts {
    width: 100%;
    height: calc(100% - 44px);
  }
}
</style>
